<template>
  <div>
    <br />
    <div>
      <i class="el-icon-paperclip" style="margin-left: 10px;"/>
      <span> 数据报表</span>
    </div>
    <el-card style="width: 98%; margin-left: 10px;">
      <br />
      <el-row :gutter="50" style="margin-left: 10px;">
        <el-col :span="9">
          <div style="color: black;font-size: 25px;margin-bottom: 30px;">电影销售额对比</div>
          <div v-for="movieRecord in movieRecordList" style="margin-top: 20px;">
            <span>《{{movieRecord.movieName}}》</span>
            <el-row>
              <el-col :span="20" style="margin-top: 3px;">
                <el-progress :percentage="movieRecord.moneyProprotion" color="green" v-if="movieRecord.moneyProprotion>40"></el-progress>
                <el-progress :percentage="movieRecord.moneyProprotion" color="royalblue" v-else-if="movieRecord.moneyProprotion>20"></el-progress>
                <el-progress :percentage="movieRecord.moneyProprotion" color="red" v-else></el-progress>
              </el-col>
              <el-col :span="4">
                <span style="color: saddlebrown;margin-left: 8px;">￥</span>
                <span v-text="movieRecord.money" style="color: saddlebrown;"></span>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="9">
          <div style="color: black;font-size: 25px;margin-bottom: 30px;">电影销量对比</div>
          <div v-for="movieRecord in movieRecordList" style="margin-top: 20px;">
            <span>《{{movieRecord.movieName}}》</span>
              <div style="margin-top: 3px;">
                <el-progress :percentage="movieRecord.numProprotion" color="green" v-if="movieRecord.numProprotion>40"></el-progress>
                <el-progress :percentage="movieRecord.numProprotion" color="royalblue" v-else-if="movieRecord.numProprotion>20"></el-progress>
                <el-progress :percentage="movieRecord.numProprotion" color="red" v-else></el-progress>
              </div>
          </div>
        </el-col>

        <el-col :span="6">
          <div style="color: black;font-size: 25px;margin-bottom: 30px;">各项交易数据比例</div>
          <el-row :gutter="30" style="margin-top: 70px;">
            <el-col :span="12">
              <el-popover placement="bottom-start" width="300" trigger="hover">
                <div style="font-size: 20px;color: black;margin-bottom: 20px;">充值金额占比</div>
                <div v-for="userRecord in userRecordList">
                  <div v-text="userRecord.userName"></div>
                  <el-row>
                    <el-col :span="20" style="margin-top: 3px;">
                      <el-progress :percentage="userRecord.recharge" color="green" v-if="userRecord.recharge>20"></el-progress>
                      <el-progress :percentage="userRecord.recharge" color="royalblue" v-else-if="userRecord.recharge>10"></el-progress>
                      <el-progress :percentage="userRecord.recharge" color="red" v-else></el-progress>
                    </el-col>
                    <el-col :span="4">
                      <span style="color: saddlebrown;margin-left: 8px;">￥</span>
                      <span v-text="userRecord.rechargeMoney" style="color: saddlebrown;"></span>
                    </el-col>
                  </el-row>
                </div>
                <el-progress slot="reference" type="circle" :percentage="recordForm.recharge" color="goldenrod"></el-progress>
              </el-popover>
              <div style="margin-left: 20px;">充值金额占比</div>
            </el-col>
            <el-col :span="12">
              <el-popover placement="bottom-start" width="300" trigger="hover">
                <div style="font-size: 20px;color: black;margin-bottom: 20px;">消费金额占比</div>
                <div v-for="userRecord in userRecordList">
                  <div v-text="userRecord.userName"></div>
                  <el-row>
                    <el-col :span="20" style="margin-top: 3px;">
                      <el-progress :percentage="userRecord.consume" color="green" v-if="userRecord.consume>20"></el-progress>
                      <el-progress :percentage="userRecord.consume" color="royalblue" v-else-if="userRecord.consume>10"></el-progress>
                      <el-progress :percentage="userRecord.consume" color="red" v-else></el-progress>
                    </el-col>
                    <el-col :span="4">
                      <span style="color: saddlebrown;margin-left: 8px;">￥</span>
                      <span v-text="userRecord.consumeMoney" style="color: saddlebrown;"></span>
                    </el-col>
                  </el-row>
                </div>
                <el-progress slot="reference" type="circle" :percentage="recordForm.consume" color="green"></el-progress>
              </el-popover>
              <div style="margin-left: 20px;">消费金额占比</div>
            </el-col>
          </el-row>

          <el-row :gutter="30" style="margin-top: 50px;">
            <el-col :span="12">
              <el-popover placement="bottom-start" width="300" trigger="hover">
                <div style="font-size: 20px;color: black;margin-bottom: 20px;">充值成交率</div>
                <div v-for="userRecord in userRecordList">
                  <div v-text="userRecord.userName"></div>
                  <el-progress :percentage="userRecord.rechargeDeal" color="green"
                  v-if="userRecord.rechargeDeal>20"></el-progress>
                  <el-progress :percentage="userRecord.rechargeDeal" color="royalblue"
                  v-else-if="userRecord.rechargeDeal>10"></el-progress>
                  <el-progress :percentage="userRecord.rechargeDeal" color="red" v-else></el-progress>
                </div>
                <el-progress slot="reference" type="circle" :percentage="recordForm.rechargeDeal" color="gold"></el-progress>
              </el-popover>
              <div style="margin-left: 20px;">充值交易率</div>
            </el-col>
            <el-col :span="12">
              <el-popover placement="bottom-start" width="300" trigger="hover">
                <div style="font-size: 20px;color: black;margin-bottom: 20px;">消费成交率</div>
                <div v-for="userRecord in userRecordList">
                  <div v-text="userRecord.userName"></div>
                  <el-progress :percentage="userRecord.consumeDeal" color="green" v-if="userRecord.consumeDeal>20"></el-progress>
                  <el-progress :percentage="userRecord.consumeDeal" color="royalblue" v-else-if="userRecord.consumeDeal>10"></el-progress>
                  <el-progress :percentage="userRecord.consumeDeal" color="red" v-else></el-progress>
                </div>
                <el-progress slot="reference" type="circle" :percentage="recordForm.consumeDeal" color="limegreen"></el-progress>
              </el-popover>
              <div style="margin-left: 20px;">消费交易率</div>
            </el-col>
          </el-row>

          <el-row style="margin-top: 50px;">
            <el-popover placement="bottom-start" width="300" trigger="hover">
              <div style="font-size: 20px;color: black;margin-bottom: 20px;">积分兑换率</div>
              <div v-for="userRecord in userRecordList">
                <div v-text="userRecord.userName"></div>
                <el-progress :percentage="userRecord.integralDeal" color="green" v-if="userRecord.integralDeal>20"></el-progress>
                <el-progress :percentage="userRecord.integralDeal" color="royalblue" v-else-if="userRecord.integralDeal>10"></el-progress>
                <el-progress :percentage="userRecord.integralDeal" color="red" v-else></el-progress>
              </div>
              <el-progress slot="reference" type="circle" :percentage="recordForm.integralDeal" color="blue"></el-progress>
            </el-popover>
            <div style="margin-left: 20px;">积分兑换率</div>
          </el-row>
        </el-col>
      </el-row>
      <br>
    </el-card>
  </div>
</template>

<script>
  export default {
    created() {
      this.getRecord()
      this.getUserRecordList()
      this.getMovieRecordList()
    },
    data(){
      return{
        recordForm:{},
        userRecordList:[],
        movieRecordList:[]
      }
    },
    methods:{
      async getRecord(){
        const {data:result} = await this.$http.get('/deal/getRecord')
        this.recordForm=result.data
      },
      async getUserRecordList(){
        const {data:result} = await this.$http.get('/deal/getUserRecordList')
        this.userRecordList=result.data
      },
      async getMovieRecordList(){
        const {data:result} = await this.$http.get('/consume/getMovieRecordList')
        this.movieRecordList=result.data
      },
      getMoney(percentage) {
        return "￥"+percentage;
      },
      formatMoney(percentage) {
        return "￥"+percentage*5;
      }
    }
  }
</script>

<style>
</style>
